<template>
  <div class="online-image-card" :style="{'padding-left': supportSelect ? '28px' : undefined}">
    <div class="card-box">
      <online-custom-image class="image" style="margin-right: 10px;"
        :style="{'align-self': widget.props.imageAlign}"
        v-if="widget.props.imagePosition === 'left' && imageWidget"
        :value="getWidgetValue(imageWidget)"
        :src="imageWidget.props.src"
        :fit="imageWidget.props.fit"
        :width="imageWidget.props.width"
        :height="imageWidget.props.height"
        :round="imageWidget.props.round"
        :radius="imageWidget.props.radius"
        :widget="imageWidget"
        :rowData="rowData"
      />
      <online-custom-block class="card-content"
        :widgetList="childWidgetList"
        :operation="{
          getWidgetValue: getWidgetValue,
          onWidgetValueChange: onWidgetValueChange,
          onValueChange: onValueChange
        }"
      />
      <online-custom-image class="image" style="margin-left: 10px;"
        :style="{'align-self': widget.props.imageAlign}"
        v-if="widget.props.imagePosition === 'right' && imageWidget"
        :value="getWidgetValue(imageWidget)"
        :src="imageWidget.props.src"
        :fit="imageWidget.props.fit"
        :width="imageWidget.props.width"
        :height="imageWidget.props.height"
        :round="imageWidget.props.round"
        :radius="imageWidget.props.radius"
        :widget="imageWidget"
        :rowData="rowData"
      />
    </div>
    <div class="menu-box">
      <slot name="menu" />
    </div>
    <van-checkbox class="select" v-if="supportSelect" :value="isSelect" @input="(val) => onSelectChange(val)" shape="square" icon-size="16px" />
  </div>
</template>

<script>
export default {
  name: 'onlineImageCard',
  props: {
    rowData: {
      type: Object
    },
    masterTable: {
      type: Object
    },
    widget: {
      type: Object
    },
    parentWidget: {
      type: Object
    },
    supportSelect: {
      type: Boolean,
      default: false
    },
    isSelect: {
      type: Boolean,
      default: false
    }
  },
  inject: ['form'],
  data () {
    return {
      checked: false,
      childWidgetList: []
    }
  },
  methods: {
    onSelectChange (val) {
      this.$emit('select', this.rowData, val);
    },
    getValue (data, widget) {
      if (widget == null || widget.column == null) return;
      if (this.form().readOnly || widget.widgetType === this.SysCustomWidgetType.Label || widget.widgetType === this.SysCustomWidgetType.Text) {
        let dictObj = data[widget.column.columnName + 'DictMap'];
        if (dictObj != null && dictObj.name) return dictObj.name;
        let dictArray = data[widget.column.columnName + 'DictMapList'];
        if (Array.isArray(dictArray) && dictArray.length > 0) return dictArray.map(item => item.name).join(',');
      }
      return data[widget.column.columnName];
    },
    getWidgetValue (widget) {
      if (this.rowData == null || widget.bindData.dataType !== this.SysCustomWidgetBindDataType.Column) {
        return this.form().getWidgetValue(widget);
      } else {
        if (this.parentWidget == null) {
          // 来自于主表
          if (widget.relation) {
            return this.getValue(this.rowData[widget.relation.variableName], widget);
          } else {
            return this.getValue(this.rowData, widget);
          }
        } else {
          // 来自于从表
          return this.getValue(this.rowData, widget);
        }
      }
    },
    onValueChange (widget, val) {
      if (widget.column == null) return;
      if (this.rowData) {
        this.rowData[widget.column.columnName] = val;
      } else {
        this.form().onValueChange(widget, val);
      }
    },
    onWidgetValueChange (widget, val, detail) {
      let dictData = (detail || {}).dictData;
      if (widget.relation && dictData && this.rowData && widget.column) {
        if (widget.bindData.dataType === this.SysCustomWidgetBindDataType.Column && widget.column) {
          if (Array.isArray(dictData)) {
            this.rowData[widget.column.columnName + 'DictMapList'] = dictData;
          } else {
            this.rowData[widget.column.columnName + 'DictMap'] = dictData;
          }
        }
      }
    }
  },
  computed: {
    imageWidget () {
      if (Array.isArray(this.widget.childWidgetList) && this.widget.childWidgetList.length > 0) {
        return this.widget.childWidgetList[0];
      }
      return null;
    }
  },
  mounted () {
    this.childWidgetList = this.widget.childWidgetList.slice(1);
  }
}
</script>

<style scoped>
  .online-image-card {
    position: relative;
    padding: 16px 16px;
    border-radius: 10px;
  }
  .card-box {
    display: flex;
    justify-content: flex-start;
  }
  .card-content {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
  }
  .select {
    position: absolute;
    left: 8px;
    top: 17px;
  }
</style>
